<template>
  <div class="app-container">
    <el-card>
      <div style="display: flex;align-items: center;justify-content: space-between">
        <span style="font-size: 18px;line-height: 18px">预警配置</span>
      </div>
      <el-table :data="fenyeList" height="605px" style="width: 100%;margin-top: 20px;" row-key="id" border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="warningTypeName" label="预警名称">
        </el-table-column>
        <el-table-column prop="warningTime" label="预警阈值">
        </el-table-column>
        <el-table-column prop="warningUnit" label="预警单位">
        </el-table-column>
        <el-table-column  label="操作" width="200">
          <template slot-scope="scope">
            <el-button  size="mini" type="text" icon="el-icon-edit" @click="add('edit',scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" :page-sizes="[20, 50,100]"
        :total="total">
      </el-pagination>
    </el-card>
    <editWarn :visible.sync="visible" ref="editWarnRef" @addSuccess="getWarningType"></editWarn>
  </div>
</template>
<script>
  import {
    warningType,//获取预警列表
  } from '@/api/report/index.js'
  import editWarn from './components/editWarn.vue'
  export default {
    data() {
      return {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        visible: false,
        treeData: [],
      }
    },
    components:{
      editWarn
    },
    computed: {
      // 根据当前页码和每页条数计算当前页的数据
      fenyeList() {
        const startIndex = (this.pageNum - 1) * this.pageSize;
        return this.treeData.slice(startIndex, startIndex + this.pageSize);
      }
    },
    created() {
      this.getWarningType();
    },
    methods: {
      //初始化信息
      getWarningType() {
        warningType().then(response => {
          this.treeData = response.data;
          this.total = response.data.length;
        });
      },
      //编辑页面
      add(type,row){
        this.visible = true;
        this.$refs.editWarnRef.openDialog(type,row);
      },
      //切换页数
      handleSizeChange(newsize) {
        this.pageNum = 1
        this.pageSize = newsize
        this.getfindRuleAll();
      },
      handleCurrentChange(newpage) {
        this.pageNum = newpage;
        this.getfindRuleAll();
      },
    }
  };
</script>

<style scoped>
  .app-container {
    padding: 20px;
  }

  .el-card {
    margin-bottom: 20px;
  }

  .btn el-button {
    margin-bottom: 20px;
  }

  .el-pagination {
    float: right;
    margin: 20px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .el-tree {
    height: 615px;
    overflow-y: auto;
  }
</style>
